import {
  createEmptySchema,
  createInbizSchema,
  createComponentStyleSchema,
  createBizStyleSchema,
  createDecoratorStyleSchema,
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';
import { Permission as locale } from './locale';

export const defaultProps = {
  titleOption: {
    status: true,
    value: 'Permission.title',
  },
  headerStyle: {
    icon: {
      type: 'icon-quanxianpeizhi',
    },
  },
  style: {
    padding: '0px 20px 15px 20px',
  },
  disposition: '',
  appPerm: ['pc', 'h5', 'manage'],
  permOption: ['fun', 'role', 'data'],
  permType: ['menu', 'action', 'model'],
  member: ['user', 'department', 'group'],
};

// Shema
export const propsSchema = createInbizSchema({
  attribute: {
    ...createEmptySchema({
      titleOption: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': 'StatusInput',
      },
      appPerm: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'Checkbox.Group',
        enum: ['pc', 'h5', 'manage'],
      },
      permOption: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'Checkbox.Group',
        enum: ['fun', 'role', 'data'],
      },
      permType: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'Checkbox.Group',
        enum: ['menu', 'action', 'model'],
      },
      member: {
        type: 'array',
        'x-decorator': 'FormItem',
        'x-component': 'Checkbox.Group',
        enum: ['user', 'department', 'group'],
      },
    }),
    // base: {
    //   type: 'void',
    //   'x-component': 'CollapseItem',
    //   properties: {

    //   }
    // }
  },
  style: {
    ...createComponentStyleSchema({
      ...createBizStyleSchema({}, {}),
    }),
    ...createDecoratorStyleSchema(),
  },
});

export const Behavior = createBehavior({
  name: 'Permission',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'Permission',
  designerProps: {
    propsSchema,
  },
  designerLocales: locale,
});

export const Resource = createResource({
  icon: 'Permission',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        'x-decorator': 'Container',
        'x-component': 'Permission',
        'x-component-props': defaultProps,
        'x-decorator-props': {
          style: { height: '100%' },
        }
      },
    },
  ],
});
